<template>
  <div style="border-top: 1px solid #f5f5f5;">
    <input type="file" @change="testFileUpload">
    <a-page-header :ghost="false" title="工作台">
      <template slot="extra">
        <a-button key="1" type="primary" @click="placeOrderFormVisible = true"> 创建订单 </a-button>
        <a-button key="2" type="primary" @click="callRobot" v-if="hasPerm([1])"> 呼叫机器 </a-button>
      </template>
      <div style="display: flex">
        <div class="avatar">
          <a-avatar :size="72" icon="user" />
        </div>
        <div class="content">
          <div class="contentTitle">你好，{{name}}，祝你开心每一天！</div>
          <div>……………………………………</div>
        </div>
      </div>
    </a-page-header>
    <a-row type="flex">
      <a-col flex="1 1 200px">
        <a-card title="最新消息">
          <a slot="extra" href="#/notice">全部</a>
          <a-list item-layout="horizontal" :data-source="noticeList">
            <a-list-item slot="renderItem" slot-scope="notice">
              <a-list-item-meta :description="notice.createTime">
                <a slot="title" href="#">{{ notice.title }}</a>
              </a-list-item-meta>
              {{ notice.content }}
            </a-list-item>
          </a-list>
        </a-card>
      </a-col>
      <a-col flex="2 1 200px">
        <a-card title="商品指数">
          <ProductChart />
        </a-card>
      </a-col>
      <a-col flex="2 1 200px">
        <a-card title="订单指数">
          <OrderChart />
        </a-card>
      </a-col>
    </a-row>
    <place-order-form 
      :visibleModal="placeOrderFormVisible" 
      @close="placeOrderFormVisible = false" 
    />
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import PlaceOrderForm from "@/views/order/components/PlaceOrderForm";
import OrderChart from "./components/OrderChart";
import ProductChart from "./components/ProductChart";
import axios from 'axios'

export default {
  components: {
    PlaceOrderForm,
    OrderChart,
    ProductChart
  },
  computed: {
    ...mapGetters(["avatar", "name"])
  },
  data() {
    return {
      placeOrderFormVisible: false,
      noticeList: [],
    };
  },
  created() {
    this.initNoticeList();
    // this.testFileUpload();
  },
  methods: {
    initNoticeList(){
      this.$store.dispatch("notice/queryList", { limit: 5, page: 0 }).then((res) => {
        this.noticeList = res.list;
      });
    },
    callRobot(){
      var vm = this;
      vm.$confirm({
        title: "确定要执行呼叫机器操作，如没有空闲机器人将呼叫失败",
        onOk() {
          vm.$store.dispatch("robot/callRobot", {}).then((res) => {
            vm.$message.success(res.msg);
          });
        },
      });
    },
    testFileUpload(e){
      const file = e.target.files[0];
      console.log(file)
      axios.put("http://192.168.2.233:1448/api/core/slam/v1/maps/stcm",file,{headers: {'Content-Type': 'application/octet-stream'}}).then(res=>{
        console.log(res)
      })
    }
  }
};
</script>
<style lang="less" scoped>
.avatar {
  flex: 0 1 72px;
}
.content {
  position: relative;
  top: 4px;
  flex: 1 1 auto;
  margin-left: 24px;
  color: rgba(0, 0, 0, 0.45);
  line-height: 22px;

  .contentTitle {
    margin-bottom: 12px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
  }
}
.ant-card {
  margin: 10px 10px 0;
}
</style>